<template>
	<view class="w100">
		<view class="flex-ali-bet m-y-22">
			<view class="">
				<text class="text-32 font-32">{{ name || '' }}</text>
				<text v-if="name" class="text-main text-32 font-32">*</text>
			</view>
			<view class="text-32 font-32">{{ cur * minScale }}{{ unit }}</view>
			<view class=""></view>
		</view>

		<view class="box position-relative" :style="{ width: width || '670rpx' }">
			<swiper :display-multiple-items="16" @change="changeSwiper" :current="num">
				<swiper-item v-for="(item, index) in 8" :key="index"></swiper-item>
				<block v-for="(item, index) in list" :key="index">
					<swiper-item>
						<view class="flex-col-bet h100 w100 position-relative">
							<view class="position-absolute top-0 left-0">
								<u-line :length="index % 5 == 0 ? '48rpx' : '24rpx'" direction="col" color="#D9D9D9"></u-line>
							</view>
							<view class="text-greey font-22 position-absolute bottom-0 left-0" v-if="index % 5 == 0">{{ min + index }}</view>
						</view>
					</swiper-item>
				</block>
				<swiper-item v-for="(item, index) in 7" :key="index"></swiper-item>
			</swiper>
			<view class="cur position-absolute"></view>
		</view>
	</view>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
const num = ref(0);
const props = defineProps({
	name: {
		type: [Number, String],
		default: '身高'
	},
	unit: {
		type: [Number, String],
		default: '厘米'
	},
	max: {
		type: Number,
		default: 100
	},
	min: {
		type: Number,
		default: 0
	},
	width: {
		type: [Number, String],
		default: '670rpx'
	},
	minScale: {
		type: [Number, String],
		default: 1
	},
	cur: {
		type: [Number, String],
		default: 0
	}
});
const emit = defineEmits(['update:cur']);
watch(
	() => props.cur,
	(newVal, oldVal) => {
		num.value = newVal - props.min;
	},
	{ immediate: true }
);
const list = computed(() => {
	return (props.max - props.min) / props.minScale + 1;
});
const changeSwiper = ({ detail: { current } }) => {
	emit('update:cur', current + props.min);
	num.value = current;
};
</script>
<style scoped lang="scss">
.box {
	height: 170rpx;
	flex-shrink: 0;
	border-radius: 12rpx;
	background: #f5f6f8;
	swiper {
		height: 170rpx;
		swiper-item {
			width: 38rpx;
			height: 170rpx;
		}
	}
}
.cur {
	width: 4rpx;
	height: 96rpx;
	flex-shrink: 0;
	background: #830102;
	top: 0;
	left: 50%;
}
</style>
